<template>
  <div class="login_background">
    <div class="login_box">
      <div class="left">
        <h1>智能WEB后台管理系统</h1>
        <p>WEB0.0.1</p>
      </div>
      <div class="right">
        <div class="form_item">
          <div class="label">用户名</div>
          <a-input size="large" v-model="phoneNumber" placeholder="请输入账号">
            <a-icon class="icon-set_one" slot="prefix" type="user" />
          </a-input>
        </div>
        <div class="form_item">
          <div class="label">密码</div>
          <a-input-password size="large" v-model="password" placeholder="请输入密码">
            <a-icon class="icon-set_one" @keyup.native.enter="goLogin" slot="prefix" type="lock" />
          </a-input-password>
        </div>
        <a-button class="btn" @click="goLogin">登录</a-button>
      </div>
    </div>
    <div class="tag_show">
      <span>技术支持：XXX科技有限公司</span>
    </div>
  </div>
</template>

<script>
// import md5 from "js-md5";
export default {
  name: "login",
  data() {
    return {
      phoneNumber: "",
      password: "",
    };
  },
  created() {
    window.addEventListener("popstate", function () {
      history.pushState(null, null, document.URL);
    });
  },
  methods: {
    goLogin() {
      this.$router.push("home");
      return;
      this.$axios
        .post(this.$url.login, {
          phoneNumber: this.phoneNumber,
          password: this.password,
          // password: md5(this.password),
        })
        .then((res) => {
          if (!res.errorCode) {
            sessionStorage.setItem("accessToken", res.resultData.token);
            // this.$store.commit("UPDATE_USER_INFO", {
            //   nickname: res.resultData.nickname,
            //   rolePermissions: res.resultData.permisions,
            //   userInfo: res.resultData,
            //   accountType: res.resultData.accountType,
            // });
            this.$router.push("Home");
          }
        })
        .catch((err) => {
          // console.log(err, "==========");
        });
    },
  },
};
</script>

<style lang="less">
.login_background {
  width: 100%;
  min-width: 1100px;
  height: 100%;
  // background: url("../assets/images/bg.jpg");
  position: relative;
  .login_box {
    width: 900px;
    height: 530px;
    display: flex;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    background: #fff;
    .left {
      width: 350px;
      height: 100%;
      // background: url("../assets/images/login_bg.jpg");
      background: #007bc7;
      background-size: 100%;
      box-sizing: border-box;
      padding: 80px 50px;
      h1 {
        font-size: 28px;
        font-weight: 600;
        text-align: left;
        color: #ffffff;
        line-height: 42px;
      }
      p {
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        color: #ffffff;
        line-height: 20px;
        margin-top: 30px;
      }
    }
    .right {
      width: 550px;
      box-sizing: border-box;
      padding: 150px 150px 100px;
      .form_item {
        height: 106px;
        .label {
          font-size: 14px;
          font-weight: 600;
          text-align: left;
          color: #333333;
          line-height: 20px;
          margin-bottom: 8px;
        }
        /deep/.ant-input-lg {
          padding-bottom: 8px;
          font-size: 14px;
        }
      }
      .btn {
        height: 40px;
        background: #007bc7;
        border-radius: 3px;
        color: #fff;
        width: 100%;
        margin-top: 14px;
      }
    }
  }
  .tag_show {
    color: #fff;
    position: absolute;
    bottom: 50px;
    right: 43.9%;
  }
}
</style>
